<template>
  <div class="edit-todo-modal" v-if="isVisible">
    <div class="modal-overlay" @click="closeModal"></div>
    <div class="modal-content">
      <div class="modal-header">
        <h2>编辑任务</h2>
        <button class="close-btn" @click="closeModal">&times;</button>
      </div>
      
      <form @submit.prevent="handleSubmit">
        <div class="form-group">
          <label for="edit-title">标题 *</label>
          <input 
            type="text" 
            id="edit-title" 
            v-model="form.title" 
            required
            placeholder="请输入任务标题"
          >
        </div>
        
        <div class="form-group">
          <label for="edit-description">描述</label>
          <textarea 
            id="edit-description" 
            v-model="form.description"
            placeholder="请输入任务描述（可选）"
          ></textarea>
        </div>
        
        <div class="form-group">
          <label for="edit-due-date">截止时间</label>
          <input 
            type="datetime-local" 
            id="edit-due-date" 
            v-model="form.dueDate"
          >
        </div>
        
        <div class="form-group">
          <label for="edit-reminder-time">提醒时间</label>
          <input 
            type="datetime-local" 
            id="edit-reminder-time" 
            v-model="form.reminderTime"
          >
          <small>设置任务提醒时间（可选）</small>
        </div>
        
        <div class="form-group">
          <label for="edit-priority">优先级</label>
          <select id="edit-priority" v-model="form.priority">
            <option value="low">低</option>
            <option value="medium">中</option>
            <option value="high">高</option>
          </select>
        </div>
        
        <div class="form-group">
          <label for="edit-category">分类</label>
          <select id="edit-category" v-model="form.category">
            <option value="work">工作</option>
            <option value="study">学习</option>
            <option value="life">生活</option>
          </select>
        </div>
        
        <div class="form-group">
          <label for="edit-tags">标签</label>
          <input 
            type="text" 
            id="edit-tags" 
            v-model="tagsInput"
            placeholder="用逗号分隔多个标签，如：重要,紧急"
          >
        </div>
        
        <div class="form-group">
          <label class="checkbox-label">
            <input 
              type="checkbox" 
              id="edit-repeat" 
              v-model="form.repeat"
            > 重复任务
          </label>
          <select 
            id="edit-repeat-rule" 
            v-model="form.repeatRule" 
            :disabled="!form.repeat"
          >
            <option value="daily">每日</option>
            <option value="weekly">每周</option>
            <option value="monthly">每月</option>
            <option value="yearly">每年</option>
          </select>
        </div>
        
        <div class="form-actions">
          <button type="submit" class="btn-save">保存</button>
          <button type="button" @click="closeModal" class="btn-cancel">取消</button>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'EditTodoForm',
  props: {
    todo: {
      type: Object,
      default: () => ({})
    },
    isVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      form: {
        title: '',
        description: '',
        dueDate: '',
        reminderTime: '',
        priority: 'medium',
        category: 'work',
        repeat: false,
        repeatRule: 'daily'
      },
      tagsInput: ''
    }
  },
  watch: {
    todo: {
      handler(newTodo) {
        if (newTodo && Object.keys(newTodo).length > 0) {
          this.form = {
            title: newTodo.title || '',
            description: newTodo.description || '',
            dueDate: newTodo.dueDate || '',
            reminderTime: newTodo.reminderTime || '',
            priority: newTodo.priority || 'medium',
            category: newTodo.category || 'work',
            repeat: newTodo.repeatRule && newTodo.repeatRule !== 'none',
            repeatRule: newTodo.repeatRule && newTodo.repeatRule !== 'none' ? newTodo.repeatRule : 'daily'
          };
          this.tagsInput = newTodo.tags ? newTodo.tags.join(', ') : '';
        }
      },
      immediate: true
    }
  },
  methods: {
    handleSubmit() {
      // 处理标签输入
      const tags = this.tagsInput
        .split(',')
        .map(tag => tag.trim())
        .filter(tag => tag);
      
      // 创建更新后的待办事项对象
      const updatedTodo = {
        ...this.todo,
        title: this.form.title,
        description: this.form.description,
        dueDate: this.form.dueDate,
        reminderTime: this.form.reminderTime,
        priority: this.form.priority,
        category: this.form.category,
        tags: tags,
        repeatRule: this.form.repeat ? this.form.repeatRule : 'none',
        updatedAt: new Date().toISOString()
      };
      
      // 发送事件到父组件
      this.$emit('update-todo', updatedTodo);
      
      // 关闭模态框
      this.closeModal();
    },
    closeModal() {
      this.$emit('close');
    }
  }
}
</script>

<style scoped>
.edit-todo-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
}

.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #eee;
}

.modal-header h2 {
  margin: 0;
  color: #34495e;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #95a5a6;
}

.close-btn:hover {
  color: #7f8c8d;
}

form {
  padding: 20px;
}

.form-group {
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #2c3e50;
}

.checkbox-label {
  font-weight: normal;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
  margin-right: 8px;
  width: auto;
}

input, select, textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: #3498db;
  box-shadow: 0 0 5px rgba(52, 152, 219, 0.3);
}

textarea {
  min-height: 100px;
  resize: vertical;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 30px;
}

.btn-save {
  background-color: #3498db;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s;
}

.btn-save:hover {
  background-color: #2980b9;
}

.btn-cancel {
  background-color: #95a5a6;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s;
}

.btn-cancel:hover {
  background-color: #7f8c8d;
}

@media (max-width: 768px) {
  .modal-content {
    width: 95%;
    margin: 10px;
  }
  
  .form-actions {
    flex-direction: column;
  }
  
  .btn-save, .btn-cancel {
    width: 100%;
  }
  
  input, select, textarea {
    padding: 8px;
    font-size: 16px; /* 防止iOS缩放 */
  }
  
  .modal-header {
    padding: 15px;
  }
  
  form {
    padding: 15px;
  }
}

@media (max-width: 480px) {
  .modal-content {
    width: 98%;
    margin: 5px;
  }
  
  .close-btn {
    font-size: 20px;
  }
}
/* 夜间模式样式 */
.dark-mode .modal-content {
  background-color: #2d2d2d;
  color: #e0e0e0;
}

.dark-mode .modal-header {
  border-color: #555;
}

.dark-mode .close-btn {
  color: #e0e0e0;
}

.dark-mode .close-btn:hover {
  color: #fff;
}

.dark-mode label {
  color: #e0e0e0;
}

.dark-mode input,
.dark-mode select,
.dark-mode textarea {
  background-color: #424242;
  color: #e0e0e0;
  border-color: #555;
}

.dark-mode input:focus,
.dark-mode select:focus,
.dark-mode textarea:focus {
  border-color: #1976d2;
  box-shadow: 0 0 5px rgba(25, 118, 210, 0.3);
}

.dark-mode .btn-save {
  background-color: #1976d2;
}

.dark-mode .btn-save:hover {
  background-color: #1565c0;
}

.dark-mode .btn-cancel {
  background-color: #616161;
}

.dark-mode .btn-cancel:hover {
  background-color: #424242;
}

</style>